<template>
    <div class="w-14 h-auto p-1 flex flex-col justify-center bg-blue-400 rounded-sm">
        <div class="flex justify-around">
            <div class="w-1 h-1 bg-white"></div>
            <div class="w-1 h-1 bg-white"></div>
            <div class="w-1 h-1 bg-white"></div>
            <div class="w-1 h-1 bg-white"></div>
            <div class="w-1 h-1 bg-white"></div>
            <div class="w-1 h-1 bg-white"></div>
        </div>
        <div class="w-full h-auto flex flex-col items-center">
            <div class="w-full h-px mt-0.5 bg-white"></div>
            <div class="w-3/5 h-px mt-0.5 bg-white"></div>
        </div>
        <div class="w-full h-auto my-1 py-1 px-1.5 bg-white relative">
            <div class="w-3/12 h-1 mb-0.5 bg-green-600"></div>
            <div class="w-4/12 h-1 mb-0.5 bg-green-400"></div>
            <div class="w-5/12 h-1 mb-0.5 bg-yellow-400"></div>
            <div class="w-6/12 h-1 mb-0.5 bg-yellow-500"></div>
            <div class="w-7/12 h-1 mb-0.5 bg-red-500"></div>
            <div class="w-1 h-1 absolute top-1 right-2 bg-green-600 rounded-l-xl"></div>
        </div>
        <div class="w-full h-auto p-1 flex flex-col items-center bg-white">
            <div class="w-full h-full flex justify-between">
                <div class="w-2 h-full flex justify-between">
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                </div>
                <div class="w-2 h-full flex justify-between">
                    <div class="w-px h-0.5 bg-black"></div>
                    <div class="w-px h-0.5 bg-black"></div>
                    <div class="w-px h-0.5 bg-black"></div>
                </div>
            </div>
            <div class="w-full h-px my-px bg-black"></div>
            <div class="w-full h-full flex justify-between">
                <div class="w-3 h-full flex justify-between">
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                </div>
                <div class="w-3 h-full flex justify-between">
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                </div>
            </div>
            <div class="w-full h-full mt-px flex justify-between">
                <div class="w-3 h-full flex justify-between">
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                </div>
                <div class="w-3 h-full flex justify-between">
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                    <div class="w-0.5 h-0.5 bg-black"></div>
                </div>
            </div>
        </div>
        <div class="w-full mt-0.5 flex justify-center">
            <div class="w-6 flex justify-around">
                <div class="w-0.5 h-0.5 bg-white"></div>
                <div class="w-0.5 h-0.5 bg-white"></div>
                <div class="w-0.5 h-0.5 bg-white"></div>
                <div class="w-0.5 h-0.5 bg-white"></div>
                <div class="w-0.5 h-0.5 bg-white"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Energy'
    }
</script>

<style>

</style>